// 加载模块
import axios from "axios";
import {$} from './utils.js';
import './goods-common.js';

// 缓存一些数据
let pages = 0;// 总页数
let page = 1;// 当前页
let size = 4;// 当前页条数

// 进入页面时，获取第一数据并渲染页面
getPageData(page,size);

// 选择每页条数
$('#size').onchange = function (){
    page = 1;
    size = this.value;
    // 获取第N页数据
    getPageData(page,size);
};

$('.pagination').onclick = function (e){
    // console.log( e.target );
    // 点击下一页
    if (e.target.parentNode.className === 'next') {
        page++;// 当前页码递增
        if (page > pages) {
            page = pages;
            return;
        }

        // 获取第N页数据
        getPageData(page,size);
    }

    // 点击上一页
    if (e.target.parentNode.className === 'prev') {
        page--;// 当前页码递减
        if (page === 0) {
            page = 1;
            return;
        }

        // 获取第N页数据
        getPageData(page,size);
    }

    // 点击任意页
    if (e.target.parentNode.className === 'num') {
        page = Number(e.target.innerText);

        // 获取第N页数据
        getPageData(page,size);
    }
};

// 获取第N页数据
function getPageData(page,size){
    // 发送请求
    axios({
        method: 'post',
        url: 'http://localhost:9999/goods/getpage',
        data: {page,size}
    })
    .then(res=>{
        let {data} = res;
        if (data.code === 1) {
            pages = data.pages;// 记录总页数
            renderTable(data.arr);// 渲染表格
            renderPage(page,pages);// 渲染分页
        } else {
            alert('网络异常，请刷新重试！');
        }
    });
}

// 根据数据渲染表格
function renderTable(data){
    let tmp = `<tr>
                <th>商品名称</th>
                <th>商品类型</th>
                <th>商品数量</th>
                <th>商品价格</th>
                <th>商品描述</th>
                <th>商品图片</th>
                <th>操作</th>
            </tr>`;
    data.forEach(item=>{
        tmp += `<tr>
                    <td>${item.name}</td>
                    <td>${item.type}</td>
                    <td>${item.count}</td>
                    <td>${item.price}</td>
                    <td>${item.desc}</td>
                    <td><img src="${item.imgurl}" alt=""></td>
                    <td>
                        <button class="btn btn-xs btn-danger">
                            <span class="glyphicon glyphicon-remove"></span> 删除
                        </button>
                        <button class="btn btn-xs btn-success">
                            <span class="glyphicon glyphicon-pencil"></span> 编辑
                        </button>
                    </td>
                </tr>`;
    });
    $('.table').innerHTML = tmp;

    // 点击删除
    let rmbtn = $('.btn-danger');
    for (let i = 0; i < rmbtn.length; i++) {
        rmbtn[i].onclick = function (){
            // 获取当前商品名称
            let name = this.parentNode.parentNode.firstElementChild.innerText;
            // 发送请求
            axios({
                method: 'post',
                url: 'http://localhost:9999/goods/del',
                data:{name}
            })
            .then(res=>{
                if (res.data.code === 1) {
                    alert('删除成功！');
                    //  删除成功，重新获取数据并渲染
                    getPageData(page,size);
                }
                else{
                    alert('删除失败，请重试！');
                }
            });
        };
    }

    let oname;

    // 点击编辑
    let edits = $('.btn-success');
    for (let i = 0; i < edits.length; i++) {
        edits[i].onclick = function (){
            $('#edit').style.display = 'block';

            // 编辑按钮对应的tr元素
            let tr = this.parentNode.parentNode;

            // 保存商品原始名称
            oname = tr.children[0].innerText;

            // 数据回填
            $('#name').value = tr.children[0].innerText;
            $('#type').value = tr.children[1].innerText;
            $('#count').value = tr.children[2].innerText;
            $('#price').value = tr.children[3].innerText;
            $('#desc').value = tr.children[4].innerText;
            $('#imgurl').value = tr.children[5].firstElementChild.src;
        };
    }

    // 点击关闭模态框
    $('.close').onclick = function (){
        $('#edit').style.display = 'none';
    };

    // 上传图片
    $('.upload-form').onsubmit = function (e){
        e.preventDefault();// 阻止表单提交

        let fd = new FormData(this);

        axios({
            method: 'post',
            url: 'http://localhost:9999/goods/upload',
            data: fd
        })
        .then(res=>{
            alert(res.data.msg);
            if (res.data.code === 1) {
                // 上传成功，展示上传图片地址
                $('#imgurl').value = res.data.imgurl;
            }
        })
        .catch(()=>{
            alert('网络异常，请重试！');
        });
    };

    // 点击 保存修改
    $('#save').onclick = function (){
        let name = $('#name').value;
        let type = $('#type').value;
        let count = $('#count').value;
        let price = $('#price').value;
        let desc = $('#desc').value;
        let imgurl = $('#imgurl').value;

        // 发送请求
        axios({
            method: 'post',
            url: 'http://localhost:9999/goods/update',
            data:{name,type,count,price,desc,imgurl,oname}
        })
        .then(res=>{
            alert(res.data.msg);
            if (res.data.code === 1) {
                // 修改成功，关闭模态框，重新渲染页面
                $('#edit').style.display = 'none';
                getPageData(page,size);
            }
        });
    };
}

// 根据数据渲染分页
function renderPage(page,pages){
    let tmp = `<li class="prev">
                <a href="#" aria-label="Previous">&laquo;</a>
            </li>`;

    for (var i = 1; i <= pages; i++) {
        tmp += `<li class="num"><a href="#">${i}</a></li>`;
    }

    tmp += `<li class="next">
                <a href="#" aria-label="Next">&raquo;</a>
            </li>`;
    
    $('.pagination').innerHTML = tmp;

    // 当前页添加选择状态
    $('.pagination li')[page].className = 'active';
}

// 点击搜索
$('.btn-primary').onclick = function (){
    let kw = $('#search').value;

    // 空值判断
    if (!kw) {
        alert('搜索内容不能为空！');
        return;
    }

    // 发送搜索请求
    axios({
        method: 'post',
        url: 'http://localhost:9999/goods/search',
        data: {kw}
    })
    .then(res=>{
        if (res.data.code === 1) {
            // 渲染表格数据
            renderTable(res.data.data);
        } else {
            // 搜索不到数据
            $('.table').innerHTML = `<h1>暂无数据！</h1>`;
        }
    });
};
